<template>
  <router-view class="router_body" v-slot="{ Component}">
    <!-- <keep-alive :include="store_router.state.keepAlive">
       
      </keep-alive> -->
    <transition :name="['slide-left','slide-right'][store_router.state.routerSlide]">
      <component :is="Component" />
    </transition>
  </router-view>
  <!-- v-show="tabbarIf(store_router.state.routerIndex)" -->
  <van-tabbar v-model="tabbarActive" fixed :style="{'padding-bottom':$core.apiCore.getsafeArea().bottom+'px'}"
    v-show="tabbarIf(store_router.state.routerIndex)">
    <template v-for="(item,index) in tabbarArrV" :key="index">
      <van-tabbar-item :icon="item.icon" @click="tabbarChange(item.name,index)">
        {{item.title}}
      </van-tabbar-item>
    </template>
  </van-tabbar>

</template>

<script setup>
  import {
    inject,
    getCurrentInstance,

  } from "vue";
  let {
    proxy
  } = getCurrentInstance();
  import {
    tabbarArr
  } from './router';

  // data
  let store_router = inject("$store_router");
  let tabbarArrV = tabbarArr;
  let tabbarActive = store_router.state.routerIndex;

  // 生命周期


  // methods
  const tabbarChange = (active, index) => {
    proxy.$core.router(active, {}, 0);
  }

  const tabbarIf = (routerIndex) => {
    proxy.tabbarActive = routerIndex;
    console.log(routerIndex);
    return routerIndex !== -1;
  }


  // This starter template is using Vue 3 experimental <script setup> SFCs
  // Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
</script>

<style lang="less">
  .router_body {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    background-color: #f3f6f9;
  }

  .slide-left-leave-active {
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    top: 0;
    animation: slide_leave_l .3s;
  }

  .slide-left-enter-active {
    position: absolute;
    backface-visibility: hidden;
    top: 0;
    animation: slide_enter_l .3s;
    z-index: 1;
  }

  @keyframes slide_leave_l {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(100%, 0, 0);
    }
  }

  @keyframes slide_enter_l {
    from {
      transform: translate3d(-95%, 0, 0);
    }

    to {
      transform: translate3d(0, 0, 0);
    }
  }

  .slide-right-leave-active {
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    top: 0;
    animation: slide_leave_r .3s;

  }

  .slide-right-enter-active {
    position: absolute;
    backface-visibility: hidden;
    top: 0;
    animation: slide_enter_r .3s;
    z-index: 1;
  }

  @keyframes slide_leave_r {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(-95%, 0, 0);
    }
  }

  @keyframes slide_enter_r {
    from {
      transform: translate3d(100%, 0, 0);
    }

    to {
      transform: translate3d(0, 0, 0);

    }
  }

  .van-tabbar {
    animation: tabbarShow .1s;
  }

  @keyframes tabbarShow {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
</style>